<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State Colors 状态色 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-xl-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            State Colors 状态色
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            可以在大部分组件中使用State Colors
                        </div>
                        <div class="e-section-content">
                            <div class="table-responsive">
                                <table class="table table-bordered table-head-solid">
                                    <thead>
                                    <tr>
                                        <th style="width: 150px">状态</th>
                                        <th style="width: 200px">Class 后缀</th>
                                        <th>Class 示例</th>
                                        <th>预览</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--success">Success</span></td>
                                        <td><code>*-success</code></td>
                                        <td><code>btn-success</code> <code>e-font-success</code></td>
                                        <td>
                                            <a href="#" class="btn btn-success">success</a>
                                            <span class="e-font-success">success</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--info">Info</span></td>
                                        <td><code>*-info</code></td>
                                        <td><code>btn-info</code> <code>e-font-info</code></td>
                                        <td>
                                            <a href="#" class="btn btn-info">info</a>
                                            <span class="e-font-info">info</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--warning">Warning</span></td>
                                        <td><code>*-warning</code></td>
                                        <td><code>btn-warning</code> <code>e-font-warning</code></td>
                                        <td>
                                            <a href="#" class="btn btn-warning">warning</a>
                                            <span class="e-font-warning">warning</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--danger">Danger</span></td>
                                        <td><code>*-danger</code></td>
                                        <td><code>btn-danger</code> <code>e-font-danger</code></td>
                                        <td>
                                            <a href="#" class="btn btn-danger">danger</a>
                                            <span class="e-font-danger">danger</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--primary">Primary</span></td>
                                        <td><code>*-primary</code></td>
                                        <td><code>btn-primary</code> <code>e-font-primary</code></td>
                                        <td>
                                            <a href="#" class="btn btn-primary">primary</a>
                                            <span class="e-font-primary">primary</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--brand">Brand</span></td>
                                        <td><code>*-brand</code></td>
                                        <td><code>btn-brand</code> <code>e-font-brand</code></td>
                                        <td>
                                            <a href="#" class="btn btn-brand">brand</a>
                                            <span class="e-font-brand">brand</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span class="e-badge e-badge--inline e-badge--dark">Dark</span></td>
                                        <td><code>*-dark</code></td>
                                        <td><code>btn-dark</code> <code>e-font-dark</code></td>
                                        <td>
                                            <a href="#" class="btn btn-dark">dark</a>
                                            <span class="e-font-dark">dark</span>
                                        </td>
                                    </tr>
                                    <tr class="active">
                                        <td><span class="e-badge e-badge--inline e-badge--light">Light</span></td>
                                        <td><code>*-light</code></td>
                                        <td><code>btn-light</code> <code>e-font-light</code></td>
                                        <td>
                                            <a href="#" class="btn btn-light">light</a>
                                            <span class="e-font-light">light</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Base Colors
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            可以在大部分组件中使用Base Colors
                        </div>
                        <div class="e-section-content ">
                            <div class="table-responsive">
                                <table class="table table-bordered table-head-solid">
                                    <thead>
                                    <tr>
                                        <th style="width: 150px">级别</th>
                                        <th>Class 示例</th>
                                        <th width="200">预览</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td colspan="4"><span class="e-font-bold">Label Classes</span></td>
                                    </tr>
                                    <tr>
                                        <td>Level 1</td>
                                        <td>
                                            <code>e-label-font-color-1</code>&nbsp;
                                            <code>e-label-bg-color-1</code>
                                        </td>
                                        <td>
                                            <span class="e-label-font-color-1">字体颜色</span>
                                            <span class="e-label-bg-color-1"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 2</td>
                                        <td>
                                            <code>e-label-font-color-2</code>&nbsp;
                                            <code>e-label-bg-color-2</code>
                                        </td>
                                        <td>
                                            <span class="e-label-font-color-2">字体颜色</span>
                                            &nbsp;
                                            <span class="e-label-bg-color-2"
                                                  style="padding: 5px;  color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 3</td>
                                        <td>
                                            <code>e-label-font-color-3</code>&nbsp;
                                            <code>e-label-bg-color-3</code>
                                        </td>
                                        <td>
                                            <span class="e-label-font-color-3">字体颜色</span>
                                            &nbsp;
                                            <span class="e-label-bg-color-3"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 4</td>
                                        <td>
                                            <code>e-label-font-color-4</code>&nbsp;
                                            <code>e-label-bg-color-4</code>
                                        </td>
                                        <td>
                                            <span class="e-label-font-color-4">字体颜色</span>
                                            &nbsp;
                                            <span class="e-label-bg-color-4"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4"><span class="e-font-bold">Shape Classes</span></td>
                                    </tr>
                                    <tr>
                                        <td>Level 1</td>
                                        <td>
                                            <code>e-shape-font-color-1</code>&nbsp;
                                            <code>e-shape-bg-color-1</code>
                                        </td>
                                        <td>
                                            <span class="e-shape-font-color-1">字体颜色</span>
                                            &nbsp;
                                            <span class="e-shape-bg-color-1"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 2</td>
                                        <td>
                                            <code>e-shape-font-color-2</code>&nbsp;
                                            <code>e-shape-bg-color-2</code>
                                        </td>
                                        <td>
                                            <span class="e-shape-font-color-2">字体颜色</span>
                                            &nbsp;
                                            <span class="e-shape-bg-color-2"
                                                  style="padding: 5px;  color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 3</td>
                                        <td>
                                            <code>e-shape-font-color-3</code>&nbsp;
                                            <code>e-shape-bg-color-3</code>
                                        </td>
                                        <td>
                                            <span class="e-shape-font-color-3">字体颜色</span>
                                            &nbsp;
                                            <span class="e-shape-bg-color-3"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Level 4</td>
                                        <td>
                                            <code>e-shape-font-color-4</code>&nbsp;
                                            <code>e-shape-bg-color-4</code>
                                        </td>
                                        <td>
                                            <span class="e-shape-font-color-4">字体颜色</span>
                                            &nbsp;
                                            <span class="e-shape-bg-color-4"
                                                  style="padding: 5px; color: #fff;">背景颜色</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Typography 排版
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-desc">
                            可以在所有排版中使用State Color
                        </div>
                        <div class="e-section-content e-section-content--solid--">
                            <span class="e-font-success">Success state text</span>&nbsp;
                            <span class="e-font-info">Info state text</span><br><br>
                            <span class="e-font-warning">Warning state text</span>&nbsp;
                            <span class="e-font-danger e-font-bold">Danger state text</span>&nbsp;
                            <span class="e-font-primary e-font-bold">Primary state text</span>&nbsp;
                            <span class="e-font-brand e-font-bold">Focus state text</span>
                            <span class="e-font-dark e-font-bold">Dark state text</span>
                            <span class="e-font-light e-font-bold">Light state text</span>
                        </div>
                        <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>
                        <div class="e-section-desc">
                            可以在所有排版中使用Base Color
                        </div>
                        <div class="e-section-content e-section-content--solid--">
                            <span class="e-label-font-color-4">Label color level 4</span>&nbsp;&nbsp;
                            <span class="e-label-font-color-3">Label color level 3</span>&nbsp;&nbsp;
                            <span class="e-label-font-color-2">Label color level 2</span>&nbsp;&nbsp;
                            <span class="e-label-font-color-1">Label color level 1</span>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Button 按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            可以在所有按钮中使用State Color
                        </div>
                        <div class="e-section-content e-section-content--solid--">
                            <a href="#" class="btn btn-success">Success</a>
                            <a href="#" class="btn btn-info">Info</a>
                            <a href="#" class="btn btn-warning">Warning</a>
                            <a href="#" class="btn btn-danger">Danger</a>
                            <a href="#" class="btn btn-primary">Primary</a>
                            <a href="#" class="btn btn-brand">Brand</a>
                            <a href="#" class="btn btn-dark">Dark</a>
                            <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>
                            <a href="#" class="btn btn-outline-success">Success</a>
                            <a href="#" class="btn btn-outline-info">Info</a>
                            <a href="#" class="btn btn-outline-warning">Warning</a>
                            <a href="#" class="btn btn-outline-danger">Danger</a>
                            <a href="#" class="btn btn-outline-primary">Primary</a>
                            <a href="#" class="btn btn-outline-dark">Dark</a>
                            <a href="#" class="btn btn-outline-brand">Brand</a>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Alert 提示
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            可以在所有提示中使用State Color
                        </div>
                        <div class="e-section-content">
                            <div class="alert alert-success" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-info" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-warning" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-danger" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>

                            <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                            <div class="alert alert-outline-success" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-outline-info" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-outline-warning" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                            <div class="alert alert-outline-danger alert-dismissible fade show" role="alert">
                                <strong>Hi!</strong> 这是一个提示
                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
            <!--end::Card-->

            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Progress 进度条
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            可以在所有进度条中使用State Color
                        </div>
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
                                     aria-valuemin="0" aria-valuemax="100">25%
                                </div>
                            </div>

                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 80%"
                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 80%"
                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 50%"
                                     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>